<template>
  <transition name="move">
    <div class="food_warp" v-show="isshow" ref="foodwarp">
      <div>
        <div class="img-header">
          <img :src="food.image">
          <i class="fa fa-angle-left" @click="hide"></i>
        </div>
        <div class="content-title">
          <div class="food_name">{{food.name}}</div>
          <div class="food_sell">
            <span class="food_info">月售{{food.sellCount}}份</span>
            <span class="food_info">好评率{{food.rating}}%</span>
          </div>
          <div class="food_prices">
            <span class="food_price">￥{{food.price}}</span>
            <span class="food_oldPrice" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
            <div class="btn_wrap">
              <btn v-show="food.count>0" :food="food" @drop="drop"></btn>
            </div>
            <transition name="fade">
              <div v-show="!food.count" class="addshop" @click="add"> 加入购物车</div>
            </transition>
          </div>
        </div>
        <split></split>
        <div class="food-desc">
          <h1 class="title">商品介绍</h1>
          <p class="text">{{food.info||'暂无介绍'}}</p>
        </div>
        <split></split>
        <div class="food-ratings">
          <div class="ratings-header">
            <h1 class="title">商品评论</h1>
            <div class="btns">
              <span class="btn all" :class="{active:showType=='all'}" @click="showType='all'">全部 <span class="num">{{food.ratings&&food.ratings.length}}</span></span>
              <span class="btn good" :class="{active:showType=='good'}" @click="showType='good'">推荐 <span class="num">{{goodratings.length}}</span></span>
              <span class="btn bad" :class="{active:showType=='bad'}" @click="showType='bad'">吐槽 <span class="num">{{badratings.length}}</span></span>
            </div>
            <div class="filter-btn" :class="{active:showContent}" @click="showContent=!showContent">
              <i class="fa fa-check-circle"></i>
              <span class="text">只看有内容的评价</span>
            </div>
          </div>
          <div class="ratings-body">
            <span v-if="food.ratings&&food.ratings.length==0" class="no-msg">暂无评价</span>
            <ul v-else>
              <li class="rating-item" v-for="rating in food.ratings" v-show="showRating(rating.text,rating.rateType)" :key="rating.username">
                <div class="title">
                  <span class="time">{{rating.rateTime|fmtDate}}</span>
                  <span class="right">
                    <span class="tel">{{rating.username}}</span>
                    <img class="user-img" :src="rating.avatar">
                  </span>
                </div>
                <div class="content">
                  <i class="fa fa-thumbs-up" v-if="rating.rateType==0"></i>
                  <i class="fa fa-thumbs-down" v-else></i>
                  <span class="text">{{rating.text}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </transition>
</template>

<script>
import Scroll from 'better-scroll'
import btn from "components/btn/btn"
import Vue from "vue"
import split from "components/split"
    export default {
      name: "food",
      created(){
      },
      mounted(){

      },
      props:{
        food:{
          type:Object,
          default(){
            return {};
          }
        }
      },
      data () {
        return {
          isshow:false,
          scroll:null,
          showContent:true,
          showType:"all",//all good bad
        }
      },
      methods:{
        showRating(text,type){
          if(this.showContent&&!text){
            return false
          }
          if(this.showType=="good"){
            return type==0
          }
          if(this.showType=="bad"){
            return type==1
          }
          return true
        },
        show(){
          console.log("show")
          this.isshow = true;
          this.showContent=true;
          this.showType="all";
          this.$nextTick(()=>{
            if(!this.scroll){
              this.scroll = new Scroll(this.$refs.foodwarp,{
                click:true
              });
            }else{
              this.scroll.refresh();
            }
          })
        },
        hide(){
          this.isshow = false;
        },
        add(e){
          if(!this.food.count){
            Vue.set(this.food,"count",1);
          }else{
            this.food.count++
          }
          this.$emit("drop",e.target);
        },
        drop(dom){
          this.$emit("drop",dom);
        },
      },
      computed:{
        goodratings(){
          if(this.food.ratings){
            return this.food.ratings.filter(v=>v.rateType===0);
          }
          return []
        },
        badratings(){
          if(this.food.ratings){
            return this.food.ratings.filter(v=>v.rateType===1);
          }
          return []
        }
      },
      watch:{

      },
      components:{
        btn,split
      },
      filters:{
        fmtDate(time){
          Date.prototype.format = function(fmt) {
            var o = {
              "Y+" : this.getFullYear(),
              "M+" : this.getMonth() + 1,
              // 月份
              "d+" : this.getDate(),
              // 日
              "h+" : this.getHours() % 12 == 0 ? 12 : this.getHours() % 12,
              // 小时
              "H+" : this.getHours(),
              // 小时
              "m+" : this.getMinutes(),
              // 分
              "s+" : this.getSeconds(),
              // 秒
              "q+" : Math.floor((this.getMonth() + 3) / 3),
              // 季度
              "S" : this.getMilliseconds()
              // 毫秒
            };
            var week = {
              "0" : "日",
              "1" : "一",
              "2" : "二",
              "3" : "三",
              "4" : "四",
              "5" : "五",
              "6" : "六"
            };
            if (/(y+)/.test(fmt)) {
              fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                .substr(4 - RegExp.$1.length));
            }
            if (/(E+)/.test(fmt)) {
              fmt = fmt
                .replace(
                  RegExp.$1,
                  ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f"
                    : "/u5468")
                    : "")
                  + week[this.getDay() + ""]);
            }
            for ( var k in o) {
              if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                  : (("00" + o[k]).substr(("" + o[k]).length)));
              }
            }
            return fmt;
          };
          return new Date(time).format("yyyy-MM-dd HH:mm:ss")
        }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/styleus">
.food_warp
  position fixed;
  left 0px
  top 0
  width 100%
  bottom 48px
  background #fff
  z-index 40
  transition all .2s linear
  transform translate3d(0,0,0)
  &.move-enter,&.move-leave-to
    transform translate3d(100%,0,0)
  .img-header
    width 100%
    height 0
    padding-top 100%
    position relative
    img
      width 100%
      height 100%
      position absolute
      left 0
      top 0
    .fa-angle-left
      position absolute
      top 0
      left 0
      padding 18px
      font-size  24px
      color: #fff
      text-shadow 1px 1px 3px #333
  .content-title
    background #fff
    padding 18px
    .food_name
      font-size 14px
      line-height 17px
      font-weight 700
    .food_desc,.food_sell
      line-height 18px
      font-size 10px
      color rgb(147,153,159)
    .food_sell
      font-size 0
      margin-bottom 8px
      .food_info
        font-size 10px
        margin-right 8px
        line-height 26px
    .food_prices
      font-size 0
      position relative
      .food_price
        font-size 14px
        color: #F01414
        margin-right 8px
        font-weight 700
      .food_oldPrice
        font-size 10px
        font-weight 700
        text-decoration line-through
        color rgb(147,153,159)
      .btn_wrap
        position absolute
        right 0
        top 0
        transform: translateY(-25%);
      .addshop
        position absolute
        right 0
        top 0
        transform: translateY(-25%);
        font-size 10px
        color #ffffff
        padding 6px 12px
        border-radius 24px
        background-color rgba(0,160,220,1)
        box-sizing border-box
        vertical-align bottom
        opacity 1
        transition opacity .2s linear
        &.fade-enter,&.fade-leave-to
          opacity 0

  .food-desc
    padding 18px
    .title
      font-size 14px
    .text
      padding 6px
      font-size 12px
      color rgba(77,85,93,1)
      line-height 24px
      text-align justify

  .food-ratings
    font-size 0
    .ratings-header
      padding 18px
      border-bottom 1px solid rgba(7,17,27,.1)
      .title
        font-size 14px
      .btns
        padding 16px 0 18px 0
        border-bottom 1px solid rgba(7,17,27,.1)
        .btn
          padding 8px 12px
          border-radius 2px
          font-size 12px
          background-color rgba(0,160,220,.2)
          margin-right 8px
          display inline-block
          .num
            font-size 9px
          &.good
            background-color rgba(0,160,220,.2)
          &.active
            color #ffffff
            background-color rgba(0,160,220,1)
          &.bad
            background-color rgba(77,85,93,.2)
            &.active
              background-color rgba(77,85,93,1)
      .filter-btn
        padding-top 12px
        &.active
          .fa-check-circle
            color #009A53
        .fa-check-circle
          font-size 24px
          color rgb(147,153,159)
          margin-right 4px
        .text
          font-size 12px
          color: rgb(147,153,159)
          position relative
          top -3px
    .ratings-body
      padding 0 16px
      .no-msg
        font-size 12px
        padding 16px 0
        color rgb(147,153,159)
        display inline-block
      .rating-item
        padding 16px 0
        border-bottom 1px solid rgba(7,17,27,.1)
        &:last-child
          border-bottom none
        .title
          overflow hidden
          margin-bottom 6px
          &:after
            content ""
            clear both
            overflow hidden
          .time
            font-size 10px
            color rgb(147,153,159)
            display inline-block
            float left
          .right
            float right
            display inline-block
            .tel
              font-size 10px
              color rgb(147,153,159)
              display inline-block
              margin-right 6px
            .user-img
              width 12px
              height 12px
              border-radius 50%
              vertical-align top
        .content
          .fa
            font-size 12px
            &.fa-thumbs-up
              color rgb(0,160,220)
            &.fa-thumbs-down
              color rgb(147,153,159)
          .text
            font-size 12px
            padding-left 4px
/*<div class="ratings">
  <div class="ratings-body">
    <ul>
      <li class="rating-item" v-for="rating in food.ratings">
        <div class="title">
          <span class="time">{{rating.rateTime}}</span>
          <span class="right">
            <span class="tel">{{rating.username}}</span>
            <img class="user-img" :src="rating.avatar">
          </span>
        </div>
        <div class="content">
          <i class="fa fa-thumbs-up" v-if="rating.rateType==0"></i>
          <i class="fa fa-thumbs-down" v-else></i>
          <span class="text">{{rating.text}}</span>
        </div>
      </li>
    </ul>
  </div>
</div>*/
</style>
